<template>

<div class="wdbox">
    <div class="wdtop" @click="tologin()">
        <img class="wdtx" :src='this.$store.state.wd.wdtx' alt="" preview="wdtx" preview-text=""><!-- 头像跳转 -->
            <div class="wdnn">
                <span class="W_name">{{this.$store.state.wd.wdname==null? '未登录':this.$store.state.wd.wdname}}</span>&nbsp;&nbsp;
                <img :src='wdsex' alt="" width="20" height="20">&nbsp;&nbsp;
                <img src="static/img/Lv0.png" alt="" height="20">
            </div>
            <div>
                <span class="wdid">ID:{{this.$store.state.wd.wdid==null? '未登录':this.$store.state.wd.wdid}}</span>
            </div>
            <span class="wdintro">书签：{{this.$store.state.wd.wdintro}}</span>
            <div class="wddz">
                <span @click="showDialogStyle = true">{{this.$store.state.wd.wdlike}}点赞</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <div v-transfer-dom>
                <x-dialog v-model="showDialogStyle" hide-on-blur >
                <div style="text-align:center;background-image: url('../..//static/img/dzbg.jpg');background-size:300px 200px;" @click="showDialogStyle = false">
                <br><br>
                <span>{{this.$store.state.wd.wdname}}  获赞数</span>
                <br><br>
                <p style="font-size:30px;font-weight: bolder;">{{this.$store.state.wd.wdlike}}</p>
                <br>
                <x-icon type="ios-close-outline"></x-icon>
                </div>
                </x-dialog>
                </div>

                <router-link class="wline" :to="'/Mygz'"><span>{{this.gz==null? 0:this.gz.length}}关注</span></router-link>&nbsp;&nbsp;&nbsp;&nbsp;
                <router-link class="wline" :to="'/Myfs'"><span>{{this.fs==null? 0:this.fs.length}}粉丝</span></router-link>&nbsp;&nbsp;&nbsp;&nbsp; 
            </div>
    </div>

    <div>
    <group>
        <cell :title="'我的帖子'" @click.native=""  link="/Mypost" :is-loading="!wdtz" :value="wdtz" :disabled="!wdtz">
            <img slot="icon" width="30" style="display:block;margin-right:5px;" src="static/img/wdtz.png">
        </cell>
        <cell :title="'我的树洞'" @click.native=""  link="/Mysd" :is-loading="!wdsd" :value="wdsd" :disabled="!wdsd">
            <img slot="icon" width="30" style="display:block;margin-right:5px;" src="static/img/wdsc2.png">
        </cell>

        <cell :title="'我的评论'" @click.native=""  link="/Mypl" :is-loading="!wdpl" :value="wdpl" :disabled="!wdpl">
            <img slot="icon" width="30" style="display:block;margin-right:5px;" src="static/img/wdpl.png">
        </cell>

        <!-- <cell :title="'我收藏的'" @click.native=""  link="/Login" :is-loading="!wdsc" :value="wdsc" :disabled="!wdtz">
            <img slot="icon" width="30" style="display:block;margin-right:5px;" src="static/img/wdsc2.png">
        </cell> -->
        
        <cell :title="'我赞过的'" @click.native=""  link="/Mydz" :is-loading="!wddz" :value="wddz" :disabled="!wddz">
            <img slot="icon" width="30" style="display:block;margin-right:5px;" src="static/img/wddz.png">
        </cell>

        <cell :title="'浏览记录'" @click.native=""  link="/Mylook" :is-loading="!wdlook" :value="wdlook" :disabled="!wdlook">
            <img slot="icon" width="30" style="display:block;margin-right:5px;" src="static/img/wdzz.png">
        </cell>
    </group>

    <group>
        <cell :title="'我的设置'" @click.native=""  link="/Mysz" replace :disabled="!wdtz">
            <img slot="icon" width="30" style="display:block;margin-right:5px;" src="static/img/wdsz.png">
        </cell>
    </group>
    </div>
    
    <br><br><br>
</div>

</template>
<script>
import {TransferDomDirective as TransferDom } from 'vux'
export default {
  inject:['Autologin'],
  directives: {
    TransferDom
  },
  methods: {
      tologin(){
          if(!sessionStorage.getItem('User_id')){
              this.$router.push('/Login');
          }else{}
      }
  },
  created(){
      this.Autologin();
  },
  mounted () {
      var sex =this.$store.state.wd.wdsex;
      if(sex == '无'){
          this.wdsex = 'static/img/sex.png'
      }
      else if(sex == '男') {
          this.wdsex = 'static/img/male.png'
      }
      else if(sex == '女') {
          this.wdsex = 'static/img/female.png'
      }
    setTimeout(() => {
      this.wdtz = this.$store.state.wd.wdtz
      this.wdsd = this.$store.state.wd.wdsd
      this.wdpl = this.$store.state.wd.wdpl
      this.wdsc = this.$store.state.wd.wdsc
      this.wddz = this.$store.state.wd.wddz
      this.wdlook = this.$store.state.wd.wdlook
      this.wdlike = this.$store.state.wd.wdlike
      this.gz=this.$store.state.wd.wdflow
      this.fs=this.$store.state.wd.wdfriend
    }, 500)
  },
  data () {
    return {
        wdsex:'static/img/sex.png',
        showDialogStyle: false,
        gz:0,
        fs:0,
        wdtz:null,
        wdsd:null,
        wdpl:null,
        wdsc:null,
        wddz:null,
        wdlook:null,
    }
  }
  
}
</script>
<style scoped>
.wline{
text-decoration:none;
color:aliceblue;
}
.wdbox{
    display: flex;
    flex-direction: column;
}
.wdtop{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    background-image: url('../../static/img/bg.png');
    background-size:cover;
}

.wdtx{
    background-color: aliceblue;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    margin-right: 20px;
}
.wdnn{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    color:white;
    margin-top: 10px;
    margin-bottom: 10px;
    
}
.W_name{
    max-width: 240px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.wdid{
    background-color: rgba(36, 36, 36, 0.678);
    color:white;
    font-size: 12px;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
.wddz{
    margin-top: 10px;
    color:white;
}
.wdintro{
    color:white;
    font-size: 14px;
}
</style>
